import React from 'react';
import { Card, Avatar, Typography, Rate, Tag, Space } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Text, Paragraph } = Typography;

/**
 * 评价卡片组件
 * 
 * 功能：
 * - 展示用户评价信息
 * - 显示评分、评价内容、评价时间
 * - 支持回复显示
 * 
 * Props:
 * @param {Object} review - 评价数据对象
 * @param {boolean} showActions - 是否显示操作按钮
 */
const ReviewCard = ({ review, showActions = false }) => {
  // 格式化日期
  const formattedDate = dayjs(review.created_at).format('YYYY-MM-DD HH:mm');

  // 评分标签配置
  const getRatingConfig = (rating) => {
    if (rating >= 4.5) return { color: 'green', text: '非常满意' };
    if (rating >= 3.5) return { color: 'blue', text: '满意' };
    if (rating >= 2.5) return { color: 'orange', text: '一般' };
    return { color: 'red', text: '不满意' };
  };

  const ratingConfig = getRatingConfig(review.rating);

  return (
    <Card 
      size="small" 
      className="review-card"
      styles={{ body: { padding: '16px' } }}
    >
      {/* 用户信息和评分 */}
      <div className="review-header">
        <div className="user-info">
          <Avatar 
            icon={<UserOutlined />} 
            size="small"
            className="user-avatar"
          />
          <div className="user-details">
            <Text strong className="username">
              {review.user?.username || '匿名用户'}
            </Text>
            <Text type="secondary" className="review-date">{formattedDate}</Text>
          </div>
        </div>
        
        <div className="rating-info">
          <Space align="center">
            <Rate disabled value={review.rating} allowHalf className="rating" />
            <Tag color={ratingConfig.color} className="rating-tag">
              {ratingConfig.text}
            </Tag>
          </Space>
        </div>
      </div>

      {/* 评价内容 */}
      <div className="review-content">
        <Paragraph 
          className="review-text"
          ellipsis={{
            rows: 3,
            expandable: true,
            symbol: '查看更多'
          }}
        >
          {review.content}
        </Paragraph>
      </div>

      {/* 评价图片（如果有） */}
      {review.images && review.images.length > 0 && (
        <div className="review-images">
          {review.images.slice(0, 3).map((image, index) => (
            <div key={index} className="review-image-item">
              <img 
                src={image.url} 
                alt={`Review image ${index + 1}`} 
                className="review-image"
              />
            </div>
          ))}
          {review.images.length > 3 && (
            <div className="review-image-more">
              +{review.images.length - 3}
            </div>
          )}
        </div>
      )}

      {/* 卖家回复 */}
      {review.reply && (
        <div className="review-reply">
          <div className="reply-header">
            <Avatar 
              icon={<UserOutlined />} 
              size="small"
              className="seller-avatar"
            />
            <Text strong className="seller-label">卖家回复</Text>
          </div>
          <Paragraph className="reply-content">
            {review.reply.content}
          </Paragraph>
          {review.reply.created_at && (
            <Text type="secondary" className="reply-date">
              {dayjs(review.reply.created_at).format('YYYY-MM-DD HH:mm')}
            </Text>
          )}
        </div>
      )}

      {/* 操作按钮 */}
      {showActions && (
        <div className="review-actions">
          <Space size="small">
            <Tag color="blue">举报</Tag>
            <Tag color="purple">点赞</Tag>
          </Space>
        </div>
      )}
    </Card>
  );
};

export default ReviewCard;
